<template>
   <van-nav-bar title="全部商品"  left-arrow @click-left="onClickLeft"/>
  <van-grid :column-num="2" >
    <van-grid-item v-for="item in shoplist" :key="item" @click="bindJump(item.id)">
      <div class="ShopGoodsDis">
        <img :src="item.picture" style="width: 160px;height: 150px;border-radius: 10%;" />
        <p class="shopPrice">{{ item.price }}</p>
        <p class="shopP">{{ item.detail }}</p>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script setup  lang="ts">

import { useShopList } from "@/hooks/shoplist"
const { shoplist,onClickLeft,bindJump } = useShopList()
</script>

<style lang="scss" scoped>
:deep(.van-icon:before){
    color: rgb(124, 120, 115);
    font-size: 20px;
}


.van-grid-item {
  background-color: #cccccc;

  .van-image {
    border: 2px solid #ff5252;
  }

  .ShopGoodsDis {
    .shopPrice {
      color: #ff5252;
      text-align: center;
      font-size: 14px;
    }

    .shopP {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis; //文本超出省略号替代
      padding: 2px auto;
    }
  }
}
</style>
